import { h, ref, onMounted } from 'vue'
import { NSpace, NButton, NTag } from 'naive-ui'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { TableColumns } from '@/common/types'
import { DeleteOutlined, ExclamationCircleOutlined } from '@vicons/antd'

export function useColumns(onCallback: Function) {
  const t = window.$t

  const columnsRef = ref({
    columns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })
  const versionVariable = {
    currentTaskLogId: 0
  }

  const createColumns = () => {
    const columns = [
      {
        title: t('taskManage.version'),
        key: 'version',
        ...COLUMN_WIDTH_CONFIG['index'],
        render: (rowData: any, unused: number) => {
          if (rowData.id === versionVariable.currentTaskLogId) {
            return h(
              NTag,
              { type: 'success', size: 'small' },
              {
                default: () =>
                  `V${rowData.version} ${t('taskManage.currentVersion')}`
              }
            )
          } else {
            return `V${rowData.version}`
          }
        }
      },
      {
        title: t('common.description'),
        key: 'versionDesc',
        width: 50
      },
      {
        title: t('common.createTime'),
        key: 'createTime',
        width: 160
      },
      {
        title: t('taskManage.creator'),
        key: 'creator',
        width: 80
      },

      {
        title: t('taskManage.releaseState'),
        key: 'releaseState',
        align: 'center',
        width: 100,
        render: (rowData: any, unused: number) =>
          h(
            'div',
            null,
            rowData.releaseState
              ? window.$t('taskManage.released')
              : window.$t('taskManage.notRelease')
          )
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](1.5),
        render: (rowData: any, unused: number) => {
          return h(NSpace, null, {
            default: () => [
              h(
                NButton,
                {
                  circle: true,
                  type: 'info',
                  size: 'tiny',
                  title: t('taskManage.switchVersion'),
                  onClick: () => void onCallback({ rowData }, 'switchVersion'),
                  disabled: rowData.id === versionVariable.currentTaskLogId
                },
                {
                  icon: () => h(ExclamationCircleOutlined)
                }
              ),
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'delVersion'),
                  circle: true,
                  type: 'error',
                  size: 'tiny',
                  title: t('taskManage.delVersion'),
                  disabled: rowData.id === versionVariable.currentTaskLogId
                },
                {
                  icon: () => h(DeleteOutlined)
                }
              )
            ]
          })
        }
      }
    ] as TableColumns
    columnsRef.value = {
      columns,
      tableWidth: calculateTableWidth(columns)
    }
  }
  onMounted(() => {
    createColumns()
  })

  return {
    columnsRef,
    versionVariable
  }
}
